<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<title>Mootools Sortables in an element with overflow:auto or overflow:scroll fix</title>

<link  href="css/template.css" rel="stylesheet" type="text/css" media="screen" />

<script type="text/javascript" src="mootools-1.2.3-core.js"></script>
<script type="text/javascript" src="mootools-1.2.3.1-more.js"></script>

<script type="text/javascript">
	
window.addEvent('domready',function(){
	
	new Sortables($$('ul'), {
/*<?php
if(!isset($_GET['old']) || $_GET['old'] != 'true'){
?>*/
		clone: function(event,element,list){
			var scroll = {x:0 ,y: 0};
			element.getParents().each(function(el){
				if(['auto','scroll'].contains(el.getStyle('overflow'))){
					scroll = {
						x: scroll.x + el.getScroll().x,
						y: scroll.y + el.getScroll().y
					}					
				}
			});
			var position = element.getPosition();
			
			return element.clone().setStyles({
				margin: '0px',
				position: 'absolute',
				visibility: 'hidden',
				'width': element.getStyle('width'),
				top: position.y + scroll.y,
				left: position.x + scroll.x
			}).inject(list);
		},
/*<?php
}else{
?>*/
		clone: true,
/*<?php
}
?>*/
		opacity: 0.5
	});	

});
	
	
</script>

<style type="text/css">

pre.jscode {
	background: #E6E6E6;
	border: 1px solid #CDE6B5;
	margin: 0 0 10px 195px;
	overflow: auto;
	height: 300px;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;	
}

ul.source {
	overflow: auto;
	width: 185px;
	height: 300px;
	float: left;
}

ul.drop {
	min-width: 50px;
	height: 140px;
	list-style: none;
	background: #E6E6E6;
	border: 1px solid #CDE6B5;
}

li {
	padding: 2px;
	margin: 2px;
	cursor: move;
	z-index: 999;
	background: #eef7e6;
	border: #CDE6B5 1px solid;
}

li.img {
	float: left;
	height: 112px;
	width: 150px;
	overflow: hidden;	
}
	
</style>

</head>
<body>

<h1>Mootools Sortables in an element with overflow:auto or overflow:scroll fix</h1>

<p>
	What&#39;s wrong? Scroll down (on the left) and try drag one of the last blue boxes into the droppable below. 
	In the old situation you will see that the clone div is not sticked to your mouse, but ways higher. With the 
	code on the right hand I fixed this problem.
</p>
<p>
	<a href="?old=true">The old situation</a><br />
	<a href="?old=false">My Solution</a><br />
</p>

<ul class="source">	
	<li title="img_2" class="img">
		<div style="background: blue; height: 112px; width: 150px;">
			&nbsp;
		</div>
	</li>
	
	<li title="img_3" class="img">
		<div style="background: blue; height: 112px; width: 150px;">
			&nbsp;
		</div>
	</li>
	
	<li title="img_4" class="img">
		<div style="background: blue; height: 112px; width: 150px;">
			&nbsp;
		</div>
	</li>
	
	<li title="img_5" class="img">
		<div style="background: blue; height: 112px; width: 150px;">
			&nbsp;
		</div>
	</li>
	
	<li title="img_6" class="img">
		<div style="background: blue; height: 112px; width: 150px;">
			&nbsp;
		</div>
	</li>
	
	<li title="img_7" class="img">
		<div style="background: blue; height: 112px; width: 150px;">
			&nbsp;
		</div>
	</li>
	
	<li title="img_8" class="img">
		<div style="background: blue; height: 112px; width: 150px;">
			&nbsp;
		</div>
	</li>
	
	<li title="img_9" class="img">
		<div style="background: blue; height: 112px; width: 150px;">
			&nbsp;
		</div>
	</li>
	
	<li title="img_10" class="img">
		<div style="background: blue; height: 112px; width: 150px;">
			&nbsp;
		</div>
	</li>
	
	<li title="img_12" class="img">
		<div style="background: blue; height: 112px; width: 150px;">
			&nbsp;
		</div>
	</li>
	
	<li title="img_16" class="img">
		<div style="background: blue; height: 112px; width: 150px;">
			&nbsp;
		</div>
	</li>

</ul>

<pre class="jscode">
window.addEvent('domready',function(){
	
	new Sortables($$('ul'), {
		clone: function(event,element,list){
			var scroll = {x:0 ,y: 0};
			element.getParents().each(function(el){
				if(['auto','scroll'].contains(el.getStyle('overflow'))){
					scroll = {
						x: scroll.x + el.getScroll().x,
						y: scroll.y + el.getScroll().y
					}					
				}
			});
			var position = element.getPosition();
			
			return element.clone().setStyles({
				margin: '0px',
				position: 'absolute',
				visibility: 'hidden',
				'width': element.getStyle('width'),
				top: position.y + scroll.y,
				left: position.x + scroll.x
			}).inject(this.list);
		},
		opacity: 0.5
	});	

});
	
</pre>

<div style="clear: both;"></div>
<strong>Drop below</strong>
<ul class="drop">
</ul>

</div>
</body>
</html>
